<template>
  <div class="base-progress">
    <div class="inner" :style="{ width: w + '%' }">
      <span>{{ w }}%</span>
    </div>
  </div>
</template>

<script>
// 类型校验, 非空校验, 默认值, 自定义校验
// 非空校验和默认值互斥, 两者只要其一
// validator函数内部返回true则校验通过, 返回false或不返回则校验不通过
// validator函数的第一个参数就是属性的值
export default {
  props: {
    w: {
      type: Number,
      // required: true,
      default: 20,
      validator(value) {
        // console.log(value);
        if (value >= 0 && value <= 100) {
          console.log("通过自定义校验");
          return true;
        } else {
          console.error("长度在0~100之间");
          return false;
        }
      },
    },
  },
};
</script>

<style scoped>
.base-progress {
  height: 26px;
  width: 400px;
  border-radius: 15px;
  background-color: #272425;
  border: 3px solid #272425;
  box-sizing: border-box;
  margin-bottom: 30px;
}
.inner {
  position: relative;
  background: #379bff;
  border-radius: 15px;
  height: 25px;
  box-sizing: border-box;
  left: -3px;
  top: -2px;
}
.inner span {
  position: absolute;
  right: 0;
  top: 26px;
}
</style>